<template>
  <!-- 引用core方法 -->
  <div>
    <div>引用core方法</div>
    <div class="flex align-items-center">
      <span>当前浏览器可视区域屏幕大小为：</span>
      <h2>{{ width +' X '+ height }}</h2>
    </div>
  </div>
  <!-- 引用components组件方法 -->
  <div class="mt30">
    <div>引用components组件方法</div>
    <UseWindowSize v-slot="{ width, height }">
      <div class="flex align-items-center">
        <span>当前浏览器可视区域屏幕大小为：</span>
        <h2>{{ width +' X '+ height }}</h2>
      </div>
    </UseWindowSize>
  </div>
</template>
<script>
import { onMounted, reactive, toRefs } from 'vue';
import { UseWindowSize } from '@vueuse/components';
import { useWindowSize } from '@vueuse/core';
export default {
  name: '',
  props: {},
  components: { UseWindowSize },
  setup(props, { emit }) {
    function initState() {
      return {
        width: 0,
        height: 0,
      };
    }
    const state = reactive(initState());
    onMounted(() => {
      const { width, height } = useWindowSize();
      state.width = width;
      state.height = height;
    });
    return {
      ...toRefs(state),
    };
  },
};
</script>